<script setup lang="tsx">
import { ref, onMounted, reactive } from 'vue'
import { getHistoryipAPI } from '@/api/search/index'
import { HttpCodeEnum } from '@packages/share/enums'
import { type AxiosResponse } from 'axios'
import JmpTimeRange from '@/components/time-range'
import { assignObject } from '@/utils/object'
const props = defineProps({
  id: { type: String, required: true }
})
// 历史变更数据
const Hisinfo = reactive({
  total: 0,
  rows: [],
  startTime: '',
  endTime: ''
})
const getHisChange = (id: string) => {
  getHistoryipAPI(id).then((res: AxiosResponse) => {
    const { code } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      assignObject(Hisinfo, res.data)
    }
  })
}
// 折叠面板默认展开选项组
const activeNames = ref([])
// 标签页默认展开选项
const tabsActive = ref(0)

onMounted(() => {
  getHisChange(props.id)
})
// 时间筛选
const timeFilter = () => {
  if (!Hisinfo.startTime && !Hisinfo.endTime) {
    return Hisinfo.rows
  }
  // 将开始时间和结束时间转换为 Date 对象
  const startDate = new Date(Hisinfo.startTime);
  const endDate = new Date(Hisinfo.endTime);
  // 使用 filter 方法筛选符合条件的对象
  return Hisinfo.rows.filter((obj) => {
    const timerDate = new Date(obj.timer);
    return timerDate >= startDate && timerDate <= endDate;
  });
}
//转译编码
const modifyString = (data: string) => {
  const a = data
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;')
  .replace(/^["b'\n\r]+|["\n\r']+$/g, '')
  .replace(/(?:\\r\\n|\\r|\\n)+/g, '<br>')
  .replace(/^\\n/g, '')
  // .replace(/^["<br> \n\r]+|["\n\r]+$/g, '')
  //   .replace(/^\\n/g, '')
  //   .replace(/(?:\\r\\n|\\r|\\n)+/g, '<br>')
  //   .replace(/\\"|\\/g, '')
  //   .replace(/: <br> /g, ':')
  //   .replace(/\s*<br\s*\/?>\s*/gi, '\n')
  let normalString = a.replace(/\\x([0-9A-Fa-f]{2})/g,
    function (match, grp) {
      return String.fromCharCode(parseInt(grp, 16));
    });
  let decoder = new TextDecoder('utf-8');
  let buffer = new Uint8Array(normalString.split('').map(char => char.charCodeAt(0)));
  let correctStr = decoder.decode(buffer);
  return correctStr
};
</script>

<template>
  <div class="history">
    <div style="display: flex;justify-content: space-between;align-items: center;height: 3rem;">
      <div class="title" style="font-weight: 700;">{{ `历史变更（${Hisinfo.total}）` }}</div>
      <div class="date-picker">
        <jmp-time-range v-model:startTime="Hisinfo.startTime" v-model:endTime="Hisinfo.endTime"/>
      </div>
    </div>
    <div class="history-con">
      <div class="log-container">
        <div class="describe">
          <jm-timeline>
            <!-- 每条时间具体信息 -->
            <jm-timeline-item hide-timestamp v-for="(item, index) in timeFilter()" :key="index"
              style="padding-bottom: 0;">
              <!-- 折叠面板 -->
              <jm-collapse v-model="activeNames">
                <jm-collapse-item :name="index">
                  <template #title>
                    <span>{{ item.id }}</span>
                    <jm-tag class="tags" type="primary" >
                      <span style="cursor: pointer;">{{ item.timer }}</span>
                    </jm-tag>
                    <jm-tag class="tags" type="danger" v-for="(item2, index2) in item.tags" :key="index2">
                      {{ item2 }}
                    </jm-tag>
                  </template>
                  <!-- 描述列表 -->
                  <jm-descriptions :column="2" class="descriptions">
                    <jm-descriptions-item label="响应头状态码：">
                      {{ item.code }}
                    </jm-descriptions-item>
                    <jm-descriptions-item label="协议：">
                      <jm-tag type="info">{{ item.protocol }}</jm-tag>
                    </jm-descriptions-item>
                    <jm-descriptions-item label="应用：">
                      {{ item.app }}
                    </jm-descriptions-item>
                    <jm-descriptions-item label="网页标题：">
                      <span style="color: var(--jm-color-danger)">{{ item.title }}</span>
                    </jm-descriptions-item>
                    <jm-descriptions-item label="组件：">
                      <span style="color: var(--jm-color-danger)">
                        {{ item.components.join('、') }}
                      </span>
                    </jm-descriptions-item>
                  </jm-descriptions>
                  <!-- 标签页 -->
                  <div class="view">
                    <jm-tabs v-model="tabsActive">
                      <jm-tab-pane :label="item3.name" :name="index3" v-for="(item3, index3) in item.tabs"
                        :key="index3">
                        <div class="view-con">
                          <span v-html="modifyString(item3.data)"></span>
                          <!-- <span >{{ modifyString(item3.data) }}</span> -->
                        </div>
                      </jm-tab-pane>
                    </jm-tabs>
                  </div>
                </jm-collapse-item>
              </jm-collapse>
            </jm-timeline-item>
          </jm-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.flex-items {
  display: flex;
  align-items: center;
}

.port {
  margin-left: 0.625rem;
}

.log-length {
  position: relative;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;

  .date-picker {
    position: absolute;
    top: -0.375rem;
    right: 0;
  }
}

.log-container {
  .tags {
    margin-left: 0.3125rem;
    
  }

  .descriptions {
    margin-top: 0.625rem;
  }

  .view {
    position: relative;
    height: 18.75rem;
    border: var(--jm-border);
    border-radius: 0.3125rem;
    overflow: hidden;

    .fullScreenIcon {
      position: absolute;
      top: 0.625rem;
      right: 0.625rem;
      cursor: pointer;
    }

    .view-con {
      padding-left: 0.625rem;
      height: 100%;
      overflow-y: auto;

      &::-webkit-scrollbar-track-piece {
        background-color: var(--jm-fill-color-blank);
      }

      &::-webkit-scrollbar {
        width: 0.375rem;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 1.25rem;
        background-color: var(--jm-text-color-disabled);
      }

      .view-btn {
        position: absolute;
        top: 0%;
        right: 1.25rem;
      }
    }
  }
}

:deep(.jm-tabs.jm-tabs--top) {
  height: 100%;

  .jm-tabs__content {
    height: calc(100% - 3.4375rem);

    .jm-tab-pane {
      height: 100%;
    }
  }

  .jm-tabs__header {
    .jm-tabs__nav-wrap {
      padding: 0 0.625rem;
    }
  }
}
</style>
